<template>
  <div class="roleEdit detailView">
    <Modal v-model="isView" :mask-closable="false" title="编辑角色" :footer-hide="true">
      <Form :model="item" label-position="right" :label-width="100" :rules="rules" ref="form">
        <FormItem label="角色名称" prop="name">
          <Input v-model="item.name" type="text"/>
        </FormItem>
        <FormItem label="描述" prop="remark">
          <Input v-model="item.remark" type="textarea" :rows="4"/>
        </FormItem>
      </Form>
      <div class="operationView">
        <Button type="primary" class="operation_btn" @click="handleCancle">取消</Button>
        <Button type="primary" class="operation_btn" @click="handleSave">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "roleEdit",
    data() {
      return {
        isView: false,
        item: {
          id: 0,
          name: '',
          remark: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入角色名称', trigger: 'blur' }
          ],
          remark: [
            {required: true, message: '请输入角色描述', trigger: 'blur' }
          ]
        },
      }
    },
    methods: {
      openView(row) {
        this.isView = true
        this.$refs['form'].resetFields();
        this.item.id = 0
        if (row) {
          this.item.id = row.id
          this.item.name = row.name
          this.item.remark = row.remark
        }
      },
      handleCancle(){
        this.isView = false
        this.$refs['form'].resetFields();
      },
      handleSave(){
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let obj = Object.assign({},this.item)
            this.ajax({
              type: this.api.roleEdit.type,
              url: this.api.roleEdit.url,
              data: obj,
              isSubmit: true,
              success: (data) => {
                this.$Message.success('保存成功！');
                this.handleCancle()
                this.$emit('getList')
              },
              error: (data) => {
                this.$Message.error(data.message);
              }
            })
          }
        })
      },
    },
    components: {}
  }
</script>

<style scoped lang="scss" type="text/scss" rel="stylesheet/scss">
  .roleEdit {
  }
</style>
